<template>
  <div class="recharge-wrapper">
    <Modal
      :title="title"
      footer-hide
      :value="value"
      :mask-closable="false"
      @on-cancel="handleCancel">
      <div class="record-list" style="margin-bottom: 15px;text-align: right;">
        <Button type="primary" size="small" @click="handleRecord">查看交易记录</Button>
      </div>
      <Form
        ref="rcForm"
        :model="rcForm"
        :rules="rcRules"
        :label-width="60">
        <FormItem label="类型" prop="type">
          <Select placeholder="请选择类型" v-model="rcForm.type">
            <Option :value="1">充值</Option>
            <Option :value="2">提现</Option>
          </Select>
        </FormItem>
        <FormItem label="金额" prop="balance">
          <Input type="text" placeholder="请输入金额" :maxlength="11" v-model="rcForm.balance" number />
          <p>{{ digitUpperAmount }}</p>
        </FormItem>
        <FormItem label="备注">
          <Input type="textarea" placeholder="请输入备注" v-model="remark" />
        </FormItem>
        <FormItem>
          <Button type="error"  @click="handleCancel" style="margin-right: 10px;">取消</Button>
          <Button type="primary"  @click="handleSubmit">提交</Button>
        </FormItem>
      </Form>
    </Modal>

    <record-modal
      :title="title1"
      :id="id"
      v-model="modal1"></record-modal>
  </div>
</template>

<script>
  import recordModal from './record-modal.vue';
  import { digitUpper } from '@/static/tools';

  export default {
    name: 'rechargeModal',
    props: {
      value: {
        type: Boolean,
        default: false
      },
      title: {
        type: String
      },
      id: {
        type: Number,
        default: -1
      }
    },
    data () {
      const validateNumber = (rule, value, callback) => {
        if (value <= 0) {
          callback(new Error('请输入大于零的整数或两位小数'));
        } else if (!/^[0-9]+\.{0,1}[0-9]{0,2}$/.test(value)) {
          callback(new Error('请输入整数或者小数，小数点只能保留两位'));
        } else {
          callback();
        }
      }
      return {
        rcForm: {
          balance: '',
          type: ''
        },
        rcRules: {
          balance: [
            { type: 'number', required: true, message: '请输入金额', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
          ],
          type: [
            { required: true, type: 'number', message: '请选择类型', trigger: 'change' }
          ]
        },
        remark: '',
        title1: '',
        modal1: false
      }
    },
    computed: {
      digitUpperAmount () {
        let balance = this.rcForm.balance;
        if (balance == '' || isNaN(balance) || balance <= 0) return '';
        return digitUpper(balance);
      }
    },
    methods: {
      handleRecord () {
        this.title1 = '交易记录';
        this.modal1 = true;
      },
      handleCancel () {
        this.$refs.rcForm.resetFields();
        this.remark = '';
        this.$emit('input', false);
      },
      handleSubmit () {
        const { rcForm } = this.$refs;
        rcForm.validate((valid) => {
          if (valid) {
            const { balance, type } = this.rcForm;
            let amount = parseFloat(balance) * 1000000 / 10000;

            this.$Modal.confirm({
              title: '确认提交',
              loading: true,
              closable: true,
              onOk: () => {
                this.$http.post('/helsinki/admin/investor/recharge', {
                  investorId: this.id,
                  balance: amount,
                  type: type,
                  remark: this.remark
                })
                .then(({ data: { errcode, info, data } }) => {
                  if (errcode == 0) {
                    let msg = this.rcForm.type == 1 ? '充值成功' : '提现成功'; 
                    this.$Message.success(msg);
                    rcForm.resetFields();
                    this.remark = '';
                    this.$emit('ok');
                  } else {
                    this.$Message.error(info);
                  }

                  this.$Modal.remove();
                }, error => {
                  this.$Modal.remove();
                });
              }
            });
          }
        })
      }
    },
    components: {
      recordModal
    }
  }
</script>

<style lang="scss" scoped>
  
</style>
